<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的购物车-小米商城</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0 auto;
			}
			#tabs{
			
			}
			#tandelete {
				position: fixed;
				left: 0px;
				top: 0px;
				z-index: 1000;
				/*border: 1px solid;*/
				width: 100%;
				height: 100%;
				background-color: rgba(49, 49, 49, 0.8);
				display: none;
			}
			
			#tandel {
				position: fixed;
				left: 400px;
				top: 100px;
				z-index: 1000;
				/*border: 1px solid;*/
				width: 500px;
				height: 270px;
				background-color: white;
			}
			
			#tandel h2 {
				color: #757575;
				height: 150px;
				line-height: 150px;
				text-align: center;
			}
			
			#tandel>div {
				float: left;
				/*border: 1px solid;*/
				color: white;
				font-weight: bold;
				width: 160px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				margin-top: 30px;
			}
			
			#tandel #yes {
				background-color: #FF6700;
				cursor: pointer;
			}
			
			#tandel #no {
				background-color: #B0B0B0;
				margin-left: 80px;
				margin-right: 20px;
				cursor: pointer;
			}
			
			#tandel #yes:hover {
				background-color: #FF4400;
			}
			
			#tandel #no:hover {
				background-color: #757575;
			}
			
			#tandelete #close {
				height: 30px;
				width: 30px;
				color: #757575;
				font-size: 18px;
				line-height: 30px;
				text-align: center;
				font-weight: bold;
				border: 0px solid;
				border-radius: 50%;
				position: absolute;
				right: 10px;
				bottom: 220px;
				cursor: pointer;
			}
			
			#tandelete #close:hover {
				background-color: #DD0C0C;
				color: white;
			}
			
			#tan {
				position: fixed;
				left: 0px;
				top: 0px;
				z-index: 1000;
				/*border: 1px solid;*/
				width: 100%;
				height: 100%;
				background-color: rgba(49, 49, 49, 0.8);
				display: none;
			}
			
			#tan ul {
				position: absolute;
				left: 420px;
				top: 100px;
			}
			
			#tan li {
				float: left;
				list-style-type: none;
				height: 300px;
				width: 235px;
				background-color: white;
				margin: 10% 10px;
			}
			
			#tan li div {
				line-height: 30px;
				font-size: 14px;
				text-align: center;
			}
			
			img {
				text-align: center;
				vertical-align: middle;
			}
			
			#tan .picture {
				margin-top: 50px;
			}
			
			#tan .text {
				color: #333333;
			}
			
			#tan .xuan1 {
				height: 26px;
				width: 26px;
				border-radius: 50%;
				border: 1px solid #E2E2E2;
				margin: 15px;
			}
			
			#tan .xuan2 {
				height: 20px;
				width: 20px;
				border-radius: 50%;
				margin: 3px;
			}
			
			#tan li:hover .xuan2 {
				background-color: #E2E2E2;
			}
			
			#tan h1 {
				text-align: center;
				color: white;
				margin-top: 80px;
			}
			
			#tan .cost {
				color: #FF6700;
			}
			
			#tan .closs {
				height: 30px;
				width: 30px;
				color: #757575;
				font-size: 18px;
				line-height: 30px;
				text-align: center;
				font-weight: bold;
				border-radius: 50%;
				background-color: #FAFAFA;
				position: absolute;
				right: 200px;
				top: 80px;
				cursor: pointer;
			}
			
			#tan .closs:hover {
				background-color: #DD0C0C;
				color: white;
			}
			
			#tan #shopcar {
				height: 40px;
				width: 160px;
				line-height: 40px;
				background-color: #FF6700;
				color: white;
				font-weight: bold;
				text-align: center;
				position: absolute;
				top: 500px;
				left: 595px;
			}
			
			#tan #shopcar:hover {
				background-color: #FF4400;
			}
			
			.head {
				height: 100px;
				border-bottom: 3px solid #FF6700;
				padding: 0px 60px;
				position: relative;
			}
			
			.head div {
				float: left;
				margin: 0px 10px;
			}
			
			a {
				text-decoration: none;
			}
			
			#aa {
				background-color: #FF6700;
				height: 60px;
				width: 60px;
				line-height: 50px;
				margin: 15px 10px;
			}
			
			#bb {
				font-size: 28px;
				line-height: 100px;
			}
			
			#cc span {
				font-size: 12px;
				line-height: 100px;
				color: #757575;
			}
			
			#dd {
				line-height: 100px;
				position: absolute;
				right: 60px;
			}
			
			#dd a {
				color: #757575;
			}
			
			.body {
				clear: both;
				width: 100%;
				background-color: /* #F5F5F5*/
				;
				border-top: 1px solid #FF6700;
				text-align: center;
			}
			
			.header {
				height: 100px;
				border-bottom: 2px solid #FF6700;
			}
			
			.top {
				margin: 0 auto;
				height: 100px;
				width: 1226px;
				/*border: 1px solid;*/
			}
			
			.top>div {
				float: left;
			}
			
			.top-left {
				width: 748px;
				height: 100px;
				/*border-right: 1px solid;*/
				position: relative;
			}
			
			.top-right {
				width: 474px;
				height: 100px;
				/*border-left: 1px solid;*/
			}
			
			.top-right {
				width: 474px;
				height: 100px;
				/*border-left: 1px solid;*/
			}
			
			.logo {
				width: 50px;
				height: 50px;
				background-color: #FF6700;
				position: absolute;
				top: 26px;
			}
			
			.mycart .sp1 {
				position: absolute;
				top: 35px;
				left: 91px;
				font-weight: bold;
				font-size: 28px;
				color: #424242;
			}
			
			.mycart .sp2 {
				position: absolute;
				top: 50px;
				left: 250px;
				font-size: 12px;
				color: #75797D;
			}
			
			.top-right li {
				float: right;
				list-style: none;
				line-height: 40px;
				font-size: 12px;
				margin-top: 27px;
				padding-left: 5px;
			}
			
			.top-right li span {
				padding-left: 5px;
			}
			
			.top-right li a {
				color: #75797D;
				text-decoration: none;
			}
			
			body {
				font-size: 16px;
				font-family: "微软雅黑";
				color: #424242;
			}
			
			.all {
				padding-top: 40px;
				height: 400px;
				/*background-color: #F5F5F5;*/
			}
			
			#tabs tr {
				line-height: 70px;
				text-align: center;
			}
			
			#tabs p {
				width: 18px;
				margin-left: 20px;
				margin-top: 10px;
				height: 18px;
				border: 1px solid;
			}
			
			#tabs.gou {
				background-image: url(img/select.hover.png);
			}
			
			#tabs.beijing {
				background-image: url(img/select.active.png);
			}
			
			.cha {
				display: block;
				line-height: 28px;
				/*border: 1px solid;*/
				/*border-width: 10px;*/
				/*font-weight: bold;*/
				height: 28px;
				width: 28px;
				border-radius: 50%;
				background-color: white;
				cursor: pointer;
				color: gray;
			}
			
			.cha:hover {
				background-color: #E53935;
				color: white;
			}
			
			.jiashu {
				cursor: pointer;
			}
			
			.shu input {
				width: 80px;
				text-align: center;
				font-size: 16px;
				border: 0px solid;
				outline: none;
				height: 36px;
			}
			
			.shuzi {
				width: 80px;
			}
			
			.kuang {
				background-color: white;
				width: 160px;
				border: 1px solid;
				height: 40px;
			}
			
			.kuang span {
				/*border: 1px solid;*/
				float: left;
				min-width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-weight: bold;
			}
			
			.jianshu {
				cursor: pointer;
			}
			
			.jiashu:hover {
				background-color: #CED4DB;
			}
			
			.jianshu:hover {
				background-color: #CED4DB;
			}
			
			.jiesuan {
				width: 220px;
				height: 56px;
				/*border: 1px solid;*/
				line-height: 56px;
				background-color: #FF6700;
			}
			
			.jiesuan a {
				letter-spacing: 1px;
				/*font-weight: bold;*/
				font-size: 18px;
				color: white;
				text-decoration: none;
			}
			
			.liebiao {
				background-color: white;
			}
			
			.jiesuan:hover {
				background-color: #FF4901;
			}
			
			#thsum {
				color: #FF6700;
				font-size: 30px;
			}
			
			.hj {
				color: #FF6700;
				font-size: 16px
			}
			
			.bfoot {
				margin-top: 10px;
				width: 1190px;
				height: 50px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.bfoot div {
				width: 1190px;
				background-color: white;
				float: left;
				height: 50px;
				line-height: 50px;
			}
			
			#ba {
				width: 100px;
				color: #E0E0E0;
			}
			
			#ba a {
				color: #757575;
				padding: 0px 10px;
			}
			
			#ba a:hover {
				color: #FF4400;
			}
			
			#bbb {
				width: 570px;
			}
			
			#bc {
				width: 140px;
				color: #FF6700;
			}
			
			#bd {
				width: 180px;
				color: #FF6700;
				font-size: 28px;
			}
			
			#be {
				width: 200px;
				background-color: #FF6700;
				color: white;
				text-align: center;
				font-size: 18px;
				font-weight: bold;
				cursor: pointer;
			}
			
			#be:hover {
				background-color: #FF4400;
			}
			
			.add {
				width: 1190px;
				background-color: white;
				margin-left: auto;
				margin-right: auto;
			}
			
			.add div {
				border-bottom: 1px solid #F5F5F5;
				height: 50px;
				line-height: 50px;
				text-align: left;
				font-size: 14px;
			}
			
			.add .add1 {
				color: white;
				font-size: 18px;
				font-weight: bold;
				padding: 5px 8px;
				border-radius: 50%;
				background-color: #FF6700;
				cursor: pointer;
				margin-left: 20px;
			}
			
			.add .add2 {
				padding: 15px 0px;
				padding-right: 900px;
				cursor: pointer;
			}
			
			.shop {
				clear: both;
				background-color: #F5F5F5;
			}
			
			#sbody {
				width: 1200px;
				height: 685px;
				margin-left: auto;
				margin-right: auto;
				padding-top: 10px;
			}
			
			#sbody li {
				width: 230px;
				height: 300px;
				background-color: white;
				float: left;
				list-style-type: none;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
				margin: 0px 5px;
				margin-top: 10px;
				cursor: pointer;
			}
			
			#sbody .text {
				color: #333333;
			}
			
			#sbody .cost {
				color: #FF6700;
			}
			
			.jia {
				color: #757575;
			}
			
			#sbody .jia div {
				width: 124px;
				margin-left: auto;
				margin-right: auto;
				font-size: 14px;
				cursor: pointer;
			}
			
			#sbody .picture {
				margin-top: 50px;
			}
			
			#sbody li:hover .jia div {
				border: 1px solid #FF6700;
			}
			
			.hover {
				background-image: url(img/select.hover.png);
			}
			
			.active {
				background-image: url(img/select.active.png);
				border: 1px solid #FF6700;
			}
			
			.sover {
				color: #FFFFFF;
				background-color: #FF6700;
			}
			
			.jia .over {
				color: #FF6700;
			}
			
			.out {
				color: #757575;
			}
			
			.tanactive {
				height: 20px;
				width: 20px;
				border-radius: 50%;
				margin: 3px;
				background-color: #FF6700;
			}
			
			.tanhover {
				height: 20px;
				width: 20px;
				border-radius: 50%;
				margin: 3px;
				background-color: #E2E2E2;
			}
			
			#shead #xian {
				height: 20px;
				border-bottom: 1px solid #B0B0B0;
			}
			
			#shead h1 {
				text-align: center;
				position: relative;
				width: 300px;
				margin-left: auto;
				margin-right: auto;
				background-color: #F5F5F5;
				bottom: 20px;
				left: 0px;
				color: #757575;
			}

			.foot {
				/*margin-top: 50px;*/
				height: 300px;
				width: 100%;
				/*border: 1px solid;*/
			}
			
			.footmenu {
				width: 1226px;
				height: 100px;
				margin-bottom: 25px;
				
			}
			
			.footmenu div {
				color: #424242;
				width: 240px;
				height: 80px;
				line-height: 80px;
				float: left;
				font-size: 17px;
				border-bottom: 1px solid #DCDCDC;
			}
			
			.footmenu a {
				color: #424242;
				padding: 5px 50px;
				/*font-weight: bold;*/
			}
			
			.foot ul {
				float: left;
				list-style-type: none;
				font-size: 12px;
				margin-right: 100px;
				/*border: 1px solid red;*/
			}
			
			.foot li {
				line-height: 30px;
			}
			.foot a:hover {
				color: #FF6700;
			}
			
			.phone li {
				width: 200px;
				font-size: 14px;
				line-height: 30px;
				text-align: center;
			}
			
			.phone #boder {
				border: 1px solid #FF6700;
				color: #FF6700;
				width: 110px;
				text-align: center;
			}
			
			#boder:hover {
				background-color: #FF6700;
				color: white;
			}
			
			.baise li a{
				color: #757575;
			}
			.baise .zhyg{
				position: relative;
				margin-top: -135px;
				margin-left: 970px;
			}
			.baise span{
				display: inline-block;
				margin-bottom: 20px;
				font: "微软雅黑";
				font-size:14px;
				color: #424242;
			}
			.baise {
				border: 1px solid;
				width: 1226px;
				height: 150px;
				margin: 0 auto;
				background-color: white;
			}
			.bangzu{
				width: 100%;
				height: 155px;
				/*border: 1px solid;*/
			}
			.xmscall{
				width: 1226px;
				height: 106px;
				padding: 30px 0;
				margin: 0 auto;
				/*border: 1px solid;*/
				
			}
			.xmsc div{
				float: left;
			}
			 .xmsc{position: relative;
			 top:-58px;
			 left: 65px;
				font-size: 12px;
				line-height: 18px;
				widows: 500px;
				height: 80px;
				/*border: 1px solid blue;*/
			}
			.xmsclg{width: 58px;
			height: 58px;
			margin-left: 0;
				/*border: 1px solid blue;*/
				
			}
			.xmsc1,
			.xmsc1 a{
				color: #757575;
				text-decoration: none;
			}
			.xmsc a:hover{
				color: #EF6700;
			}
			.xmsc2,.xmsc2 a{
				text-decoration: none;
				color: #B0B0B0;
			}
			.xmsc3,.xmsc3 a{
				color: #B0B0B0
			}
			.fr{
				margin-left: 850px;
				margin-top: -135px;
			}
			

		</style>
	</head>

	<body>
		<div class="header">
			<div class="top">
				<div class="top-left">
					<div class="logo">
						<a href=" " id="logo" onmouseover="replace()" onmouseout="replace2()"><img src="img/56f6f57ce2a216f11ae8127e6269962a.png" /></a>
					</div>
					<div class="mycart">
						<span class="sp1">我的购物车</span><span class="sp2">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
					</div>
				</div>
				<div class="top-right">
					<ul>
						<li>
							<a href="#">注册</a>
						</li>
						<li>
							<a href="#">登录</a><span>▏</span></li>
					</ul>
				</div>
			</div>
		</div>

		<div class="all">
			<table id="tabs" border="0" width="1226" height="" cellpadding="0" cellspacing="0">
				<thead>
					<tr id="liebiao">
						<td width="50">
							<p></p>
							<!--<input type="checkbox" name="" id="quanxuan" value=""onclick="funSum()" />-->
						</td>
						<td>全选</td>
						<td>产品名称</td>
						<td>单价</td>
						<td>数量</td>
						<td>小计</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<p></p>
							<!--<input type="checkbox" name="" id="" value="" onclick="funSum()" />-->
						</td>
						<td><img src="img/pms_1479725605.98176311!60x60.jpg"></td>
						<td>小米手机5s 高配全网通版 </td>
						<td>1999</td>
						<td>
							<div class="kuang">
								<span class="jianshu" onclick="jianshuzi(this)">▬</span>
								<span class="shu"><input type="text" name=""  value="1" onchange ="updateSum(this)"/></span>
								<span class="jianshu" onclick="jiashuzi(this)">✚</span>
							</div>
						</td>
						<td>1999</td>
						<td><span class="cha" onclick="dele(this.parentNode.parentNode)">✖</span></td>
					</tr>
					<tr>
						<td>
							<p></p>
							<!--<input type="checkbox" name="" id="" value="" onclick="funSum()" />-->
						</td>
						<td><img src="img/pms_1487734537.81479957!80x80.jpg"></td>
						<td>米家智能家庭套装</td>
						<td>289</td>
						<td>
							<div class="kuang">
								<span class="jianshu" onclick="jianshuzi(this)">▬</span>
								<span class="shu"><input type="text" name=""  value="1" onchange ="updateSum(this)"/></span>
								<span class="jiashu" onclick="jiashuzi(this)">✚</span>
							</div>
						</td>
						<td>289</td>
						<td><span class="cha" onclick="dele(this.parentNode.parentNode)">✖</span></td>
					</tr>
					<tr>
						<td>
							<p></p>
							<!--<input type="checkbox" name="" id="" value="" onclick="funSum()" />-->
						</td>
						<td><img src="img/pms_1481507050.2285518!80x80.jpg"></td>
						<td>米家骑记电助力折叠自行车</td>
						<td>3499</td>
						<td>
							<div class="kuang">
								<span class="jianshu" onclick="jianshuzi(this)">▬</span>
								<span class="shu"><input type="text" name=""  value="1" onchange ="updateSum(this)"/></span>
								<span class="jiashu" onclick="jiashuzi(this)">✚</span>
							</div>
						</td>
						<td>3499</td>
						<td><span class="cha" onclick="dele(this.parentNode.parentNode)">✖</span></td>
					</tr>
					<tr>
						<td>
							<p></p>
						</td>
						<!--<input type="checkbox" name="" id="" value="" onclick="funSum()"/>-->
						<td><img src="img/pms_1490604824.19051012!80x80.jpg"></td>
						<td>米电脑(超强定制)</td>
						<td>3999</td>
						<td>
							<div class="kuang">
								<span class="jianshu" onclick="jianshuzi(this)">▬</span>
								<span class="shu"><input type="text" name=""  value="1" onchange ="updateSum(this)"/></span>
								<span class="jiashu" onclick="jiashuzi(this)">✚</span>
							</div>
						</td>
						<td>3999</td>
						<td><span class="cha" onclick="dele(this.parentNode.parentNode)">✖</span></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="add" id="addtr">
			<div><span class="add1" onclick="addtr1()">+</span> <span class="add2" onclick="tanc(this)">小米移动电源5000mAh 银色 49元</span></div>
			<div><span class="add1" onclick="addtr2()">+</span> <span class="add2" onclick="tanc(this)">ZMI 10号移动电源 锖色 299元</span></div>
		</div>
		<div class="bfoot">
			<div id="ba">
				<a href="xiaomi.html">继续购物</a>|
			</div>
			<div id="bbb">
			</div>
			<div id="bc">
				合计(不含运费)：
			</div>
			<div id="bd">0
			</div>
			<div id="be">去结算
			</div>
		</div>
		<!--</div>-->
		<div class="shop">
			<div id="shead">
				<div id="xian">
				</div>
				<h1>购物车中的人还买了</h1>
			</div>
			<div id="sbody">
				<ul>
					<li>
						<div class="picture" style="margin-top: 0px;">
							<img src="img/gouwuche!234x300.jpg" />
						</div>
					</li>
					<li>
						<div class="picture">
							<img src="img/pms_1476674302.67179007.jpg" />
						</div>
						<div class="text">
							小米活塞耳机 清新版
						</div>
						<div class="cost">
							1499
						</div>
						<div class="jia">
							<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
								6587696万人好评
							</div>
						</div>
					</li>
					<li>
						<div class="picture">
							<img src="img/pms_1482816047.72829695.jpg" />
						</div>
						<div class="text">
							小米活塞耳机 清新版
						</div>
						<div class="cost">
							99
						</div>
						<div class="jia">
							<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
								1000万人好评
							</div>
						</div>
					</li>
					<li>
						<div class="picture">
							<img src="img/pms_1476674302.67179007.jpg" />
						</div>
						<div class="text">
							小米活塞耳机 清新版
						</div>
						<div class="cost">
							99
						</div>
						<div class="jia">
							<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
								20000万人好评
							</div>
						</div>
					</li>
					<li>
						<div class="picture">
							<img src="img/pms_1482816047.72829695.jpg" />
						</div>
						<div class="text">
							小米活塞耳机 清新版
						</div>
						<div class="cost">
							99
						</div>
						<div class="jia">
							<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
								20000万人好评
							</div>
						</div>
					</li>
				</ul>
				<ul>
					<li>
						<div class="picture">
							<img src="img/pms_1482321205.78014235!140x140.jpg" />
						</div>
						<div class="text">
							小米活塞耳机 清新版
						</div>
						<div class="cost">
							999
						</div>
						<div class="jia">
							<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
								12340万人好评
							</div>
						</div>
					</li>
					<li>
						<div class="picture">
							<img src="img/pms_1480474019.52478532!140x140.jpg" />
						</div>
						<div class="text">
							小米活塞耳机 清新版
						</div>
						<div class="cost">
							99
						</div>
						<div class="jia">
							<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
								45678万人好评
							</div>
						</div>
					</li>
					<li>
						<div class="picture">
							<img src="img/pms_1490088823.14341375!140x140.jpg" />
						</div>
						<div class="text">
							小米活塞耳机 清新版
						</div>
						<div class="cost">
							99
						</div>
						<div class="jia">
							<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
								2467543万人好评
							</div>
						</div>
					</li>
					<li>
						<div class="picture">
							<img src="img/pms_1499248617.08482793!140x140.jpg" />
						</div>
						<div class="text">
							小米活塞耳机 清新版
						</div>
						<div class="cost">
							9999
						</div>
						<div class="jia">
							<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
								24656万人好评
							</div>
						</div>
					</li>
					<li>
						<div class="picture">
							<img src="img/pms_1501572742.41365556!140x140.jpg" />
						</div>
						<div class="text">
							小米活塞耳机 清新版
						</div>
						<div class="cost">
							2399
						</div>
						<div class="jia">
							<div onclick="addtr(this)" onmouseover="sov(this)" onmouseout="sou(this)">
								7257万人好评
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="foot">
			<div class="yuyue">
				<div class="footmenu">
							<div>
								<a href="">预约维修服务</a>|</div>
							<div>
								<a href="">7天无理由退货</a>|</div>
							<div>
								<a href="">15天免费换货</a>|</div>
							<div>
								<a href="">满150元包邮</a>|</div>
							<div>
								<a href="">520余家售后网点</a></div>
			</div>
			</div>
			<div class="bangzu">
				<div class="baise">
							<ul>
								<li>
									<a href="">
										<span>帮助中心</span></a>
								</li>
								<li>
									<a href="">账户管理</a>
								</li>
								<li>
									<a href="">购物指南</a>
								</li>
								<li>
									<a href="">订单操作</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href="">
										<span>服务支持</span></a>
								</li>
								<li>
									<a href="">售后政策</a>
								</li>
								<li>
									<a href="">自助服务</a>
								</li>
								<li>
									<a href="">相关下载</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href="">
										<span>线下门店</span></a>
								</li>
								<li>
									<a href="">小米之家</a>
								</li>
								<li>
									<a href="">服务网点</a>
								</li>
								<li>
									<a href="">零售网点</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href="">
										<span>关于小米</span></a>
								</li>
								<li>
									<a href="">了解小米</a>
								</li>
								<li>
									<a href="">加入小米</a>
								</li>
								<li>
									<a href="">联系我们</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href="">
										<span>关注我们</span></a>
								</li>
								<li>
									<a href="">新浪微博</a>
								</li>
								<li>
									<a href="">小米部落</a>
								</li>
								<li>
									<a href="">官方微信</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href=""><span>特色服务</span></a>
								</li>
								<li>
									<a href="">F 码通道</a>
								</li>
								<li>
									<a href="">礼物码</a>
								</li>
								<li>
									<a href="">防伪查询</a>
								</li>
							</ul>
						<div class="zhyg">
							<ul class="phone" style="color: #757575;">
								<li style="color: #FF6700;">
									<h2>400-100-5678</h2></li>
								<li>周一至周日 8:00-18:00</li>
								<li>（仅收市话费）</li>
								<li id="boder">24小时在线客服</li>
							</ul>
						</div>
						</div>
						
			</div>
			<div class="xmscall">
					<div class="xmsclg">
						<img width="57" height="57" src="img/56f6f57ce2a216f11ae8127e6269962a.png"/>
					</div>
					<div class="xmsc">
						<p class="xmsc1"><a href="#">小米商城</a> <span>|</span> <a href="#">MIUI</a> <span>|</span> <a href="#">米聊</a> <span>|</span> <a href="#">多看书城</a> <span>|</span> <a href="#">小米路由器</a> <span>|</span>
						<a href="#">视频电话</a> <span>|</span> <a href="#">小米天猫店</a> <span>|</span> <a href="#">小米淘宝直营店</a> <span>|</span> <a href="#">小米网盟</a> <span>|</span> <a href="#">小米移动</a> <span>|</span> 
						<a href="#">隐私政策</a><span>|</span> <a href="#">Select Region</a>
						</p>
						<p class="xmsc2">&copy;<a href="#">mi.com</a> 京ICP证110507号 <a href="#">京ICP备10046444号</a> <a href="#">京公网安备11010802020134号</a> <a href="#">京网文[2014]0059-0009号</a></p>
						<p class="xmsc3">违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
					</div>
					<div class="fr">
						<a href="#"><img width="90" height="30" src="img/truste.png"/></a>&nbsp;<a href="#"><img src="img/v-logo-2.png"/></a>&nbsp;<a href="#"><img src="img/v-logo-1.png"/></a>&nbsp;<a href="#"><img src="img/v-logo-3.png"/></a>
					</div>
			</div>

		</div>

		<div id="tandelete">
			<div id="tandel">
				<div onclick="closedele(this)" id="close">×</div>
				<h2>删除此产品吗？</h2>
				<div id="no">
					取消
				</div>
				<div id="yes">
					确定
				</div>
			</div>
		</div>
		<div id="tan">
			<h1>选择商品</h1>
			<div class="closs" onclick="closeshow(this)">×</div>
			<ul id="ul">
				<li id="tan1">
					<div class="xuan1">
						<div class="xuan2"></div>
					</div>
					<div class="picture">
						<img src="img/11.jpg" align="center" />
					</div>
					<div class="text">
						小米活塞耳机 清新版
					</div>
					<div class="cost">
						49
					</div>
				</li>
				<li id="tan2">
					<div class="xuan1">
						 <div class="xuan2"></div>
					</div>
					<div class="picture">
						<img src="img/22.jpg" align="center" />
					</div>
					<div class="text">
						小米活塞耳机 清新版
					</div>
					<div class="cost">
						99
					</div>
				</li>
			</ul>
			<div id="shopcar" onclick="tanaddtr(this)">
				加入购物车
			</div>
		</div>
		<script type="text/javascript">
			function replace() {
				var logo = document.getElementById("logo")
				var img = document.createElement("img");
				img.src = "img/56f6f57ce2a216f11ae8127e6269962a.png"
				logo.replaceChild(img, logo.firstElementChild)
			}

			function replace2() {
				var logo = document.getElementById("logo")
				var img2 = document.createElement("img");
				img2.src = "img/56f6f57ce2a216f11ae8127e6269962a.png"
				logo.replaceChild(img2, logo.firstElementChild)
			}
			var tabs = document.getElementById("tabs");
			var ps = document.querySelectorAll("p")
			for(var i = 0; i < ps.length; i++) {
				ps[i].onmouseover = function() {
					if(this.className != "beijing") {
						this.className = "gou"
					}
				}
			}
			for(var i = 0; i < ps.length; i++) {
				ps[i].onmouseout = function() {
					if(this.className != "beijing") {
						this.className = ""
					}
				}
			}
			console.log(ps)
			for(var i = 0; i < ps.length; i++) {
				ps[i].onclick = function() {
					if(this.className != "beijing") {
						this.className = "beijing";
					} else {
						this.className = ""
					}

				}
			}
			////		总计
			//		function updateSum(t) {
			//			var tr = t.parentNode.parentNode;
			//			var dj = tr.children[3].innerHTML;
			//			var num = t.value;
			//			var sum = dj * num;
			//			tr.children[5].innerHTML = sum;
			//			funSum();
			//		}
			//		小计
			function funSum() {
				var sum = 0;
				var trs = tabs.children[1].children;
				for(var i = 0; i < trs.length; i++) {
					if(trs[i].firstElementChild.firstElementChild) {
						sum += parseFloat(trs[i].children[5].innerHTML);
					}
				}
				document.getElementById("thsum").innerHTML = sum;
			}
			//		加数量
			function jiashuzi(t) {
				var shu = t.parentNode.children[1].firstElementChild;
				shu.value = parseFloat(shu.value) + 1;
				var tr = t.parentNode.parentNode.parentNode;
				var dj = tr.children[3].innerHTML
				var sum = dj * shu.value;
				tr.children[5].innerHTML = sum;
				funSum();
			}
			//		减数量
			function jianshuzi(t) {
				var shu = t.parentNode.children[1].firstElementChild;
				if(shu.value <= 1) {
					0;
				} else {
					shu.value = parseFloat(shu.value) - 1;
				}
				var tr = t.parentNode.parentNode.parentNode;
				var dj = tr.children[3].innerHTML
				var sum = dj * shu.value;
				tr.children[5].innerHTML = sum;
			}
			//	    全选
			var all = document.getElementById("quanxuan");
			all.onclick = function() {
				if(this.className != "active") {
					this.className = "active";
				} else {
					this.className = "";
				}
				if(this.className == "active") {
					for(var i = 0; i < trs.length; i++) {
						trs[i].firstElementChild.firstElementChild.className = "active";
						xuanze();
					}
				} else {
					for(var i = 0; i < trs.length; i++) {
						trs[i].firstElementChild.firstElementChild.className = "";
						xuanze();
					}
				}
			}

			function xuanze() {
				var sum = 0;
				for(var i = 0; i < trs.length; i++) {
					var choose = trs[i].firstElementChild.firstElementChild;
					if(choose.className == "active") {
						sum += parseFloat(trs[i].children[4].innerHTML);
					}
				}
				document.getElementById("bd").innerHTML = sum;
			}
			xuanze();
			//	    全选
			//		document.getElementById("quanxuan").onclick = function() {
			//			var tr = document.getElementById("liebiao");
			//			var inputs = document.getElementsByTagName("input");
			//			for(var i = 0; i < inputs.length; i++) {
			//				inputs[i].checked = this.checked;
			//				funSum();
			//			}
			//		}

			//			function show(){
			//				document.getElementById("showmtk").style.display="block";
			//				
			//			}
			//			function guanbimtk(){
			//				document.getElementById("showmtk").style.display="none";
			//			}

			function closedele() {
				document.getElementById("tandelete").style.display = "none";
			}

			function dele(de) {
				function opendele() {
					document.getElementById("tandelete").style.display = "block";
					yes
					var yes = document.getElementById("yes");
					yes.onclick = function() {
						tbody.removeChild(de.parentElement.parentElement);
						xuanze();
						closedele();
					}
					no
					var no = document.getElementById("no");
					no.onclick = function() {
						closedele();
					}
				}
				opendele();
			}
			//添加
			var tan1 = document.getElementById("tan1");
			var tan2 = document.getElementById("tan2");
		</script>

	</body>

</html>